<template>
  <view class="container">
    <!-- 顶部图片区域 -->
    <view style="background-image: url(../../../static/tabBar/shanghu.png);width: 100%;height: 300rpx;"></view>

    <!-- 顶部分类导航 -->
    <view class="tab-bar" style="background-color: rgba(255, 255, 255, 0.2);">
      <view class="tab-left" id="tabLeft">
        <view 
          v-for="(item, index) in allTabList" 
          :key="index" 
          class="tab-item" 
          :class="{ active: currentTab === index }"
          @click="switchTab(index)"
        >
          {{ item }}
        </view>
      </view>
      <view class="tab-right" @click="showAllTabs">
        <image class="tab-logo" src="../../../static/tabBar/more.png"></image>
      </view>
    </view>
    
    <!-- 全部分类弹窗 -->
    <view 
      class="all-tabs-popup" 
      :class="{ show: isPopupVisible }"
      @click.stop="closePopup"
    >
      <view class="popup-content">
        <view 
          v-for="(item, index) in allTabList" 
          :key="index" 
          class="popup-item"
          :class="{ active: currentTab === index }"
          @click="selectTab(index, item)"
        >
          {{ item }}
        </view>
      </view>
    </view>

    <!-- 楼层导航和店铺列表 -->
    <view class="floor-container">
      <!-- 左侧楼层导航 -->
      <view class="floor-left">
        <view 
          v-for="(floor, index) in floorNavList" 
          :key="index" 
          class="floor-item"
          :class="{ active: currentFloor === index }"
          @click="switchFloor(index)"
        >
          {{ floor }}
        </view>
      </view>
      
      <!-- 右侧店铺列表 -->
      <view class="floor-right">
        <view v-if="hasStoreData" class="store-list">
          <view 
            v-for="(store, storeIndex) in filteredStores" 
            :key="storeIndex" 
            class="store-card"
          >
            <view class="store-info">
              <image class="store-icon" :src="store.icon"></image>
              <view class="store-detail">
                <view class="store-name">{{ store.name }}</view>
                <view class="store-desc">微信自动积分 支付宝自动积分</view>
                <view class="store-rule">每消费X元，可积X分</view>
                <view class="store-coupon">包0000积分，可兑换0000优惠券</view>
              </view>
              <image class="delivery-icon" :src="store.deliveryIcon"></image>
            </view>
          </view>
        </view>
        <view v-else class="empty-state">
          <text class="empty-text">该楼层暂无店铺数据</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: ["全部", "餐饮美食", "服饰鞋包", "美妆护理", "数码手机"],
      allTabList: ["全部", "餐饮美食", "服饰鞋包", "美妆护理", "数码手机", "珠宝钟表", "家居生活", "运动户外", "母婴亲子", "休闲娱乐", "图书音像", "更多分类"],
      isPopupVisible: false,
      currentTab: 0,
      currentFloor: 0,
      floorNavList: ["全部", "5F", "4F", "3F", "2F", "1F", "B1", "B2"],
      floorData: [
        {
          floorLabel: "全部",
          stores: [
            {
              icon: "../../../static/tabBar/mx.png",
              name: "蜜雪冰城某某商城店面",
              deliveryIcon: "../../../static/tabBar/wb.png"
            }
          ]
        },
        {
          floorLabel: "5F",
          stores: [
            {
              icon: "../../../static/tabBar/mx.png",
              name: "蜜雪冰城某某商城店面",
              deliveryIcon: "../../../static/tabBar/wb.png"
            }
          ]
        },
        {
          floorLabel: "4F",
          stores: [
            {
              icon: "../../../static/tabBar/mx.png",
              name: "蜜雪冰城某某商城店面",
              deliveryIcon: "../../../static/tabBar/wb.png"
            }
          ]
        },
      ],
      isScrolling: false, // 新增：滚动状态标记
      scrollError: false // 新增：错误状态标记
    };
  },
  computed: {
    filteredStores() {
      if (this.currentFloor === 0) {
        return this.floorData
          .filter(floor => floor.stores && Array.isArray(floor.stores))
          .flatMap(floor => floor.stores);
      }
      
      const currentFloorData = this.floorData[this.currentFloor] || {};
      return Array.isArray(currentFloorData.stores) 
        ? currentFloorData.stores 
        : [];
    },
    hasStoreData() {
      return this.filteredStores.length > 0;
    }
  },
  mounted() {
    console.log("组件挂载完成，初始化分类导航");
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    },
    switchFloor(index) {
      this.currentFloor = index;
    },
    showAllTabs() {
      this.isPopupVisible = true;
    },
    closePopup() {
      this.isPopupVisible = false;
    },
    selectTab(index, item) {
      // 新增：如果有滚动错误或正在滚动，直接返回
      if (this.scrollError || this.isScrolling) return;
      
      this.currentTab = index;
      this.isPopupVisible = false;
      this.scrollError = false;
      
      // 使用 $nextTick 确保 DOM 已更新
      this.$nextTick(() => {
        this.scrollToTabItem(index);
      });
    },
    scrollToTabItem(index) {
      // 新增：标记为正在滚动
      this.isScrolling = true;
      
      console.log("尝试滚动到分类项索引:", index);
      
      // 创建节点查询器
      const query = uni.createSelectorQuery().in(this);
      console.log("创建节点查询器",query);
      
      // 查询分类导航容器和目标分类项
    //   query.select('#tabLeft')
    //     .boundingClientRect(rect => {
    //       // 错误处理：如果获取容器位置失败
    //       if (!rect) {
    //         console.error("获取分类导航容器位置失败");
    //         this.scrollError = true;
    //         this.isScrolling = false;
    //         return;
    //       }
          
    //       // 继续查询目标分类项
    //       query.select(`.tab-item:nth-child(${index + 1})`)
    //         .boundingClientRect(targetRect => {
    //           // 错误处理：如果获取目标项位置失败
    //           if (!targetRect) {
    //             console.error("获取目标分类项位置失败");
    //             this.scrollError = true;
    //             this.isScrolling = false;
    //             return;
    //           }
              
    //           // 计算需要滚动的距离
    //           let scrollLeft = rect.scrollLeft;
              
    //           // 目标元素左侧超出容器左侧时，向左滚动
    //           if (targetRect.left < rect.left) {
    //             scrollLeft = targetRect.left - rect.left + rect.scrollLeft;
    //           }
              
    //           // 目标元素右侧超出容器右侧时，向右滚动
    //           if (targetRect.right > rect.right) {
    //             scrollLeft = targetRect.right - rect.right + rect.scrollLeft;
    //           }
              
    //           // 执行滚动
    //           this.scrollToPosition(scrollLeft);
              
    //           // 打印调试信息
    //           console.log("目标元素左侧位置:", targetRect.left);
    //           console.log("容器左侧位置:", rect.left);
    //           console.log("计算滚动位置:", scrollLeft);
              
    //           // 滚动完成，取消标记
    //           this.isScrolling = false;
    //         })
    //         .exec();
    //     })
    //     .exec();
    },

    scrollToPosition(scrollLeft) {
      // 使用 scroll-into-view 实现滚动，并添加错误捕获
      try {
        uni.createSelectorQuery().select('#tabLeft').scrollIntoView({
          scrollLeft: scrollLeft,
          duration: 300
        });
      } catch (error) {
        console.error("滚动执行错误:", error);
        this.scrollError = true;
        this.isScrolling = false;
      }
    }
  }
};
</script>

<style scoped>
/* 样式保持不变 */
.container {
  padding: 0;
}
.search-box {
  padding: 10px;
  background-color: #f8f8f8;
}
.search-input {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 20px;
}
.search-icon {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.floor-container {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 300rpx - 80rpx - 80rpx); 
  background-color: #f5f5f5;
}
.floor-left {
  width: 20%; 
  background-color: white;
  overflow-y: auto; 
}
.floor-item {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-bottom: 1px solid #f5f5f5;
  font-size: 14px;
}
.floor-item.active {
  background-color: #f5f5f5;
  color: #f00;
  font-weight: bold;
}
.floor-right {
  flex: 1; 
  padding: 10px;
  overflow-y: auto; 
}
.store-card {
  background-color: white;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.store-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.store-icon {
  width: 120rpx;
  height: 120rpx;
  margin-right: 15rpx;
  border-radius: 8px;
}
.store-detail {
  flex: 1;
}
.store-name {
  font-weight: bold;
  margin-bottom: 5px;
}
.store-desc,
.store-rule,
.store-coupon {
  font-size: 12px;
  color: #999;
  margin-bottom: 2px;
}
.delivery-icon {
  width: 60rpx;
  height: 60rpx;
}
.tab-item {
  white-space: nowrap;
  padding: 0 12px;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
}
.tab-item.active {
  color: #f00;
  border-bottom: 2px solid #f00;
}
.tab-right {
  padding: 0 10px;
}
.tab-logo {
  width: 24px;
  height: 24px;
}

/* 全部分类弹窗样式 */
.all-tabs-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 100;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.all-tabs-popup.show {
  max-height: 300px; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.popup-content {
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  max-height: 300px;
}
.popup-item {
  width: 25%;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  box-sizing: border-box;
}
.popup-item.active {
  color: #f00;
  font-weight: bold;
}

.tab-left {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0;
  width: 100%;
  white-space: nowrap;
}
.tab-bar {
  display: flex;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
  position: relative;
  height: 44px; 
}
</style>